<template>
  <div class="operationContent" v-cloak>
    <div class="operationItem" @click="goRunDetails(xtmkArr[index], index)" v-for="(item, index) in operation" :key="index">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == index ? 'on':'']">{{iconArr[index]}}</text>
      <text class="text" :class="[activeIndex == index ? 'on':'']">{{item}}</text>
    </div>
    <div class="operationItem" @click="goRunDetails('运行情况', 4)">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 4 ? 'on':'']">{{iconArr[1]}}</text>
      <text class="text" :class="[activeIndex == 4 ? 'on':'']">运行情况</text>
    </div>
    <div class="operationItem" @click="goRunDetails('能效统计', 5)">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 5 ? 'on':'']">{{iconArr[1]}}</text>
      <text class="text" :class="[activeIndex == 5 ? 'on':'']">能效统计</text>
    </div>
    <div class="operationItem" @click="goRunDetails('能耗分析', 6)">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 6 ? 'on':'']">{{iconArr[1]}}</text>
      <text class="text" :class="[activeIndex == 6 ? 'on':'']">能耗分析</text>
    </div>
    <div class="operationItem" @click="goRunDetails('减排分析', 7)">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 7 ? 'on':'']">{{iconArr[1]}}</text>
      <text class="text" :class="[activeIndex == 7 ? 'on':'']">减排分析</text>
    </div>
    <div class="operationItem" @click="goRunDetails('故障确认', 8)">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 8 ? 'on':'']">{{iconArr[1]}}</text>
      <text class="text" :class="[activeIndex == 8 ? 'on':'']">故障确认</text>
    </div>
    <div class="operationItem" @click="goRunDetails('维修任务', 9)">
      <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 9 ? 'on':'']">{{iconArr[1]}}</text>
      <text class="text" :class="[activeIndex == 9 ? 'on':'']">维修任务</text>
    </div>
  </div>
</template>
<script>
import { addIconFontSupport, getIonFontPath } from '@/config/iconConfig.js';
import { getCache } from '@/util/storageUtils';
import { CTCE_DATALIST } from '@/config/storageTypes';
import Config from '@/config/runIconConfig.js';
const dom = weex.requireModule('dom');
export default {
  name: 'operationContent',
  data () {
    return {
      pIndexKey: '',
      operation: [],
      xtmkArr: [],
      iconArr: Config.operationIcon,
      activeIndex: null
    }
  },
  components: {},
  created () {
    getCache(CTCE_DATALIST).then(res => {
      this.data = JSON.parse(res)
      for (let i = 0, len = this.data.length; i < len; i++) {
        if (this.data[i].DISPMKXZ === '02' && (this.data[i].TITLE === '运行分布图' || this.data[i].TITLE === '设备监控' || this.data[i].TITLE === '设备管理')) {
          this.operation.push(this.data[i].TITLE)
          this.xtmkArr.push(this.data[i].XTMK)
        }
      }
    })
    addIconFontSupport(dom, "../../")
  },
  methods: {
    goRunDetails (XTMK_Id, index) {
      this.activeIndex = index;
      switch(XTMK_Id) {
        case '0101':// 运行分布图
          this.$router.open({
            name: 'runMap'
          })
        break;
        case '0801':// 设备监控
          this.$router.open({
            name: 'equipmentMonitoring'
          })
        break;
        case '00':// 设备管理
          this.$router.open({
            name: 'dmHome'
          })
        break;
        case '运行情况': // 运行情况
          this.$router.open({
            name: 'runStatus'
          })
        break;
        case '能效统计': // 能效统计
          this.$router.open({
            name: 'energyEfficiency'
          })
        break
        case '能耗分析': // 能耗分析
          this.$router.open({
            name: 'energyAnalysis'
          })
        break
        case '减排分析': // 减排分析
          this.$router.open({
            name: 'reduceAnalysis'
          })
        break
        case '故障确认': // 故障确认
          this.$router.open({
            name: 'fault'
          })
        break;
        case '维修任务': // 维修任务
          this.$router.open({
            name: 'repairTask'
          })
        break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../config/styles";

.operationContent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 50px;
  @include border(1px, solid, $--theme-border, top);
}
.operationItem{
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 104.1px;
  padding: 50px 0;
  @include border(1px, solid, $--theme-border, right);
  @include border(1px, solid, $--theme-border, bottom);
}
.text{
  font-size:29.1px;
  font-family:PingFangSC-Semibold;
  color:rgba(151,151,151,1);
  padding-top: 23px;
}
.bar-ic {
  font-size: 70px;
  color: rgba(204,204,204,1);
}
.on{
  color:rgba(62,175,252,1);
}
[v-cloak] {
  display: none;
}
</style>


